<template>
  <Modal
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="支付宝支付"
  >
   <div class="modal-main">
      <div class="flx-row-bw-c">
        <div class="flx-col-s-c">
          <div class="code-area" ref="qrCodeDiv">
<!--             <iframe
                :srcdoc="codeUrl"
                frameborder="no"
                border="0"
                marginwidth="0"
                marginheight="0"
                scrolling="no"
                width="160"
                height="160"
                style="overflow: hidden"
                >
            </iframe>-->
          </div>
          <div class="tips-area f-14">
            <p>请使用支付宝扫一扫</p>
            <p>扫描二维码支付</p>
          </div>
        </div>
        <div class="pay-img zhifubao">
        </div>
      </div>
      <div class="flx-row-c-c" style="margin-top: 30px">
        <div class="big-button-size gray-button" @click="cancel">
          选择其他支付方式
        </div>
      </div>
    </div>

  </Modal>
</template>

<script>
import QRCode from "qrcodejs2";

export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    codeUrl: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      code: null,
    };
  },
  watch: {
    codeUrl: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          this.$nextTick(function () {
            this.bindQRCode(newValue);
          });
        }
      },
    },
  },
  methods: {
    toLogin() {
      this.$storage.setToLoginRoute(this.$route.fullPath);
      window.location.href = "/login";
    },
    cancel() {
      this.config = false;
    },
    bindQRCode: function (codeUrl) {
      console.log(codeUrl)
      if (this.code) {
        this.$refs.qrCodeDiv.innerHTML = "";
        this.code.clear();
      }
      this.code = new QRCode(this.$refs.qrCodeDiv, {
        text: codeUrl,
        width: 160,
        height: 160,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      });
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;
}
.pay-img {
  @include size(228px, 284px);
  @include bg-setting();
}
.zhifubao {
  background-image: url("~@/assets/images/zhifubao-pay@2x.png");
}
.wechat {
  background-image: url("~@/assets/images/wechat-pay@2x.png");
}
.code-area {
  @include size(160px, 160px);
  @include bg-setting();
  background-color: #f7f7f7;
}
.tips-area {
  width: 180px;
  padding: 8px 20px;
  background-color: $color-main;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  margin-top: 15px;
}
</style>
